<template>
  <el-dialog
    :visible="visible"
    :title="$t('approve.information')"
    :close-on-click-modal="false"
    width="600px"
    @close="close"
  >
    <el-row class="info-row">
      <el-col :span="6">
        <i class="el-icon-user icon-bg" />{{ $t('approve.submitter') }}</el-col>
      <el-col :span="18">{{ formData.submitter }}</el-col>
    </el-row>
    <el-row class="info-row">
      <el-col :span="6"><i class="el-icon-time icon-bg" />{{ $t('approve.submitTime') }}</el-col>
      <el-col :span="18">{{ formData.submissionTime }}</el-col>
    </el-row>
    <div class="mt10" style="min-height: 316px;">
      <el-steps direction="vertical" :active="1" space="100px">
        <el-step
          v-for="item in formData.progress"
          :key="item.id"
          :title="item.reviewNode"
          :status="item.progressStatus"
        >
          <div v-if="item.reviewProposal || item.reviewUserName || item.updateTime" slot="description" class="step-des">
            <div v-if="item.reviewStatus !== 0">{{ item.reviewProposal }}</div>
            <div><span style="margin-right: 16px">{{ item.reviewUserName }}</span><span v-if="item.reviewStatus !== 0">{{ item.updateTime }}</span></div>
          </div>
        </el-step>
      </el-steps>
    </div>
  </el-dialog>
</template>

<script>
import { getApprovalProgress } from '@/api/fmea/common/approve'

export default {
  name: 'ApproveInfoDialog',
  props: {
    visible: {
      type: Boolean
    },
    params: {
      type: Object
    }
  },
  data() {
    return {
      formData: {}
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      getApprovalProgress(this.params).then(res => {
        res.data.progress = this.progressSort(res.data.progress, res.data.actTask.name)
        res.data.progress.forEach(item => {
          if (item.reviewNode === res.data.actTask.name) {
            this.curProgress = item.reviewNode
            if (item.reviewStatus === 0) {
              item.progressStatus = 'process'
            } else if (item.reviewStatus === 1) {
              item.progressStatus = 'success'
            } else if (item.reviewStatus === 2) {
              item.progressStatus = 'error'
            } else {
              item.progressStatus = 'success'
            }
          } else {
            if (item.reviewStatus === 0) {
              item.progressStatus = 'wait'
            } else if (item.reviewStatus === 1) {
              item.progressStatus = 'success'
            } else if (item.reviewStatus === 2) {
              item.progressStatus = 'error'
            } else {
              item.progressStatus = 'success'
            }
          }
          this.formData = res.data
        })
      })
    },
    // 窗口关闭前执行
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.info-row {
  padding:10px 0;
  font-size:14px;
  border-bottom: 1px solid #e6ebf5;
  display: flex;
  align-items: center;
}
.icon-bg {
  padding:2px;
  background: #D9EAFF;
  color: #5C9FF1;
  border-radius: 4px;
  margin-right: 4px;
}
</style>
